<template>
  <div>

    <div class="kflexc" style=" padding: 20px;">
      <div class="lia" :class="search.type==0?'acts':'' " @click="changetype(0)">我的订单一级来源</div>
      <div class="lia" :class="search.type==2?'acts':'' " @click="changetype(2)">我的订单二级来源</div>
      <div class="lia" :class="search.type==1?'acts':'' " @click="changetype(1)">分销订单</div>
    </div>
    <div class="kflexc" style=" padding:0 20px 0px;">
      <el-select clearable v-model="search.source_type" style="width: 250px; margin-bottom: 20px;" filterable placeholder="选择销售渠道"  v-if="search.type==0">
        <el-option :label="item.channel_name" :value="item.id"  v-for="item in xialajihe.qudaolists" :key="item.id" ></el-option>
      </el-select>

      <el-select clearable v-model="search.sources" style="width: 250px; margin-bottom: 20px;" multiple collapse-tags filterable  placeholder="选择订单来源"  v-if="search.type==0">
        <el-option :label="item.source_name" :value="item.source_name" v-for="(item,index) in xialajihe.laiyuans" :key="item.id"></el-option>
      </el-select>

      <el-select clearable v-model="search.sub_source" style="width: 250px; margin-bottom: 20px;" filterable multiple collapse-tags  placeholder="选择二级来源"  v-if="search.type==0">
        <el-option :label="item.nick_name" :value="item.nick_name"  v-for="item in xialajihe.erjilists" :key="item.author_id" ></el-option>
      </el-select>

      <el-select  v-model="search.cm_name" style="width: 250px; margin-bottom: 20px;" placeholder="选择客户经理" filterable clearable v-if="search.type == 1">
        <el-option :label="item.name" :value="item.id"  v-for="item in xialajihe.kehujinglilists" :key="item.id" ></el-option>
      </el-select>

      <el-select clearable v-model="search.merchant_name" style="width: 250px; margin-bottom: 20px;" filterable multiple collapse-tags placeholder="选择分销商"  v-if="search.type == 1">
        <el-option :label="item.name" :value="item.child_shop_id"  v-for="item in xialajihe.fenxiaoshanglists" :key="item.child_shop_id" ></el-option>
      </el-select>

      <el-select clearable v-model="search.order_pages_short_ids" multiple collapse-tags style="width: 250px; margin-bottom: 20px;" filterable placeholder="商品名称&编码">
        <el-option :key="item.id" :label="item.title" :value="item.id" v-for="item in xialajihe.shoplists"></el-option>
      </el-select>

      <el-select  v-model="search.is_settlement" style="width: 250px; margin-bottom: 20px;" placeholder="是否结算" filterable clearable v-if="search.type == 1">
        <el-option label="否" value="0" ></el-option>
        <el-option label="是" value="1" ></el-option>
      </el-select>

      <el-date-picker style="width: 470px; margin-right: 20px; margin-bottom: 20px;" v-model="times" @change="timechange" value-format="yyyy-MM-dd HH:mm:ss" type="monthrange" range-separator="——" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>

      <el-button type="danger" style=" margin-bottom: 20px;" @click="sousuo()">搜索</el-button>
    </div>

    <div style="margin:0 20px 20px;" v-loading="loading">
      <el-table :data="list" border style="width: 100%; " ref="multipleTable">

        <el-table-column align='center' prop='username' label="分销商" v-if="search.type==1"></el-table-column>

        <el-table-column align='center' prop='source' label="订单来源" v-if="search.type==0"></el-table-column>
        <el-table-column align='center' prop='channel_name' label="销售渠道" v-if="search.type==0"></el-table-column>


        <el-table-column align='center' prop='author_id' label="二级来源" v-if="search.type==2"></el-table-column>


        <el-table-column align='center' label="订单数量" prop='order_count'></el-table-column>
        <el-table-column align='center' label="发货数量" prop='shipment_count'></el-table-column>

        <el-table-column align='center' prop='active_count' label="激活数量"></el-table-column>
        <el-table-column align='center' prop='recharged_count' label="激活且充值"></el-table-column>
        <el-table-column align='center' prop='confirm_income_count' label="收入确认数量"></el-table-column>
        <el-table-column align='center' prop='sale_income' label="销售收入"></el-table-column>
        <el-table-column align='center' prop='estimated_income' label="预估佣金收入"></el-table-column>
        <el-table-column align='center' prop='confirm_income_money' label="佣金收入"></el-table-column>
        <el-table-column align='center' prop='commission_expenses' label="佣金支出"></el-table-column>
        <el-table-column align='center' prop='fanli_money' label="返利支出"></el-table-column>
        <el-table-column align='center' prop='operating_costs' label="推广支出"></el-table-column>
        <el-table-column align='center' prop='estimated_revenue' label="预估毛利润"></el-table-column>
        <el-table-column align='center' prop='real_revenue' label="实际毛利润"></el-table-column>
        <el-table-column align='center' label="操作" width="180px">
          <template slot-scope="scope">
            <div class="kflexcc">
              <div style="color:#409EFF; margin-right: 20px; cursor: pointer;" @click="daochu(scope.row)">下载</div>
              <!-- <div style="color:#409EFF; cursor: pointer;" @click="$router.push('/lirun/lirunbaobiao/anriqi?id='+scope.row.id+'&name='+scope.row.source)">按日期查看</div> -->
            </div>
          </template>
        </el-table-column>
      </el-table>
     <el-pagination style="text-align: right;" background layout="total,prev, pager, next" :current-page="search.page"
        @current-change="fanye" :page-size="search.page_size" :total="total"></el-pagination>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: "yongjin",
    data() {
      return {
        list:[],
        loading:true,
        times:[],
        xialajihe: {
          shoplists: [],
          erjilists:[],
          qudaolists:[],
          laiyuans:[],
          kehujinglilists:[],
          fenxiaoshanglists:[]
        },
        search: {
          sources:[], //订单来源 多个用逗号隔开
          source_type:[], //销售渠道 多个用逗号隔开
          cm_name:"",
          order_pages_short_ids:[], //商品id 多个以逗号隔开
          start_time:"", //开始时间
          end_time:"", // 结束时间
          sub_source:"", //二级来源
          page:1, //
          page_size:20, //
          type:0,
          merchant_name:""
        },
        total:0,

      }
    },
    created() {
      this.getlist()

      //获取商品
      axios.get('/api/gth/order-pages2?_page_size=2000')
        .then(response => {
          if (response.data.msg.code == 0) {
            this.xialajihe.shoplists = response.data.data.data
          } else {
            this.$message.error(response.data.msg.info);
          }
        })


      ///获取二级来源
      axios.get('/api/plan-market/sub-source/list')
        .then(response => {
          if (response.data.msg.code == 0) {
            this.xialajihe.erjilists = response.data.data
          } else {
            this.$message.error(response.data.msg.info);
          }
        })

      ///获取来源
      axios.get("/api/form/channel/sources")
          .then(response=> {
              if (response.data.msg.code == 0) {
                  this.xialajihe.laiyuans = response.data.data
              }else{
                  this.$message.error(response.data.msg.info);
              }
          })

      //获取销售渠道
      axios.get('/api/form/channels?page_size=2000')
        .then(response => {
          if (response.data.msg.code == 0) {
            this.xialajihe.qudaolists = response.data.data.data
          } else {
            this.$message.error(response.data.msg.info);
          }
        })

      //获取客户经理
      axios.get('/api/plan-market/user/userManagerList')
        .then(response => {
          if (response.data.msg.code == 0) {
             this.xialajihe.kehujinglilists = response.data.data
          } else {
             this.$message.error(response.data.msg.info);
          }
      })
      //获取全部分销商
      axios.get('/api/gth/partner/list?page_size=2000')
        .then(response => {
          if (response.data.msg.code == 0) {
            this.xialajihe.fenxiaoshanglists = response.data.data.data
          } else {
            this.$message.error(response.data.msg.info);
          }
        })
    },
    mounted() {

    },
    methods: {

      daochu:function(item){


        let obj = {...this.search,...{sub_source:item.author_id,appoint_source:item.source,merchant_name:item.child_id}}
        if(this.search.type == 1){
          axios.post('/api/plan-market/income/source/seller/export',obj)
            .then(response => {
              if (response.data.msg.code == 0) {
                this.$message.success('操作成功，请进入下载页查看导出进度');
                this.$router.push('/lirun/xiazai/wode')
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        }else{
          axios.post('/api/plan-market/income/source/my/export',obj)
            .then(response => {
              if (response.data.msg.code == 0) {
                this.$message.success('操作成功，请进入下载页查看导出进度');
                this.$router.push('/lirun/xiazai/wode')
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        }

      },

      timechange:function(){
        if(this.times != null){
          this.search.start_time = this.times[0];
          this.search.end_time = this.times[1];
        }else{
          this.search.start_time = ''
          this.search.end_time = ''
        }
      },
      sousuo: function() {
        // this.search.page = 1
        this.getlist()
      },
      //翻页
      fanye: function(page) {
        this.loading = true
        this.search.page = page
        this.getlist()
      },
      changetype:function(val){

        this.search = {
          sources:"", //订单来源 多个用逗号隔开
          source_type:"", //销售渠道 多个用逗号隔开
          order_pages_short_ids:"", //商品id 多个以逗号隔开
          start_time:"", //开始时间
          end_time:"", // 结束时间
          sub_source:"", //二级来源
          page:1, //
          page_size:20, //
          type:val,
          merchant_name:""
        }

        this.getlist()
      },

      //获取列表
      getlist: function() {
        this.loading = true
        let obj  = {
          sources:this.search.sources.toString(), //订单来源 多个用逗号隔开
          source_type:this.search.source_type.toString(), //销售渠道 多个用逗号隔开
          order_pages_short_ids:this.search.order_pages_short_ids.toString(), //商品id 多个以逗号隔开
          start_time:this.search.start_time, //开始时间
          end_time:this.search.end_time, // 结束时间
          sub_source:this.search.sub_source, //二级来源
          page:this.search.page, //
          page_size:this.search.page_size, //
          type:this.search.type,
          merchant_name:this.search.merchant_name,
          cm_name:this.search.cm_name
        }
        if(this.search.type == 0){
          axios.get('/api/plan-market/income/source/my/list',{params:obj})
            .then(response => {
              if (response.data.msg.code == 0) {
                this.list = response.data.data.data
                this.total = response.data.data.total
                this.loading = false
              } else {
                this.loading = false
                this.$message.error(response.data.msg.info);
              }
            })
        }
        if(this.search.type == 1){
          axios.get('/api/plan-market/income/source/seller/list',{params:obj})
            .then(response => {
              if (response.data.msg.code == 0) {
                this.list = response.data.data.data
                this.total = response.data.data.total
                this.loading = false
              } else {
                this.loading = false
                this.$message.error(response.data.msg.info);
              }
            })
        }
        if(this.search.type == 2){
          axios.get('/api/plan-market/income/author/my/list',{params:obj})
            .then(response => {
              if (response.data.msg.code == 0) {
                this.list = response.data.data.data
                this.total = response.data.data.total
                this.loading = false
              } else {
                this.loading = false
                this.$message.error(response.data.msg.info);
              }
            })
        }

      }
    }
  }
</script>


<style lang="scss" scoped>
  @import "@/assets/zuixin.scss";

  .lia {
    font-size: 16px;
  }
</style>
